<template>
    <div class="select_item_container">
        <el-form-item style="margin-bottom: 5px;width: 50%;">
            <el-input v-model="searchValue" placeholder="回车搜索" clearable
                      @keyup.enter.native="handleSearchEvent"
                      @clear="handleSearchEvent" />
        </el-form-item>
        <vxe-table-template :data="showDataList" :options.sync="tableOptions"
                            @event="handleTableEvent" />
    </div>
</template>

<script>
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "SelectOrderAndBillItem",
    props: {
        type: {
            type: String,
            default: '',
        },
        name: {
            type: String,
            default: '',
        },
        dataList: {
            type: Array,
            default() {
                return [];
            },
        },
        selectedList: {
            type: Array,
            default() {
                return [];
            },
        },
        table: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            searchValue: '',
            doSearchValue: '',
            selectionList: [],
        };
    },
    computed: {
        tableOptions() {
            let tableOptions = $.extend({}, this.table);
            tableOptions.ref = `JxcSelectTable_${ this.name }`
            return tableOptions;
        },
        showDataList() {
            return this.dataList.filter(item => {
                if (item.src_type !== this.name) {
                    return false;
                }
                if (!this.$utils.isNotEmpty(this.doSearchValue)) {
                    return true;
                }
                let checkGoodsName = (item.goods_name || '').indexOf(this.doSearchValue) !== -1;
                let checkGoodsSpec = (item.spec_info || '').indexOf(this.doSearchValue) !== -1;
                let checkGoodsUnit = (item.unit || '').indexOf(this.doSearchValue) !== -1;
                return checkGoodsName || checkGoodsSpec || checkGoodsUnit;
            });
        },
    },
    watch: {
        selectedList: {
            handler() {
                this.$nextTick(() => this.initSelection());
            },
            deep: true,
            immediate: true,
        },
        selectionList() {
            this.$emit('selected', this.name, this.selectionList);
        },
    },
    created() {
        this.clearCheckbox();
    },
    methods: {
        initSelection() {
            const _this = this;
            let tableRef = _this[_this.tableOptions.ref];
            if (tableRef && _this.$utils.isNotEmptyList(_this.selectedList)) {
                let selectedSrcList = _this.selectedList.map(item => item.src_sid);
                let filter = _this.showDataList.filter(item => selectedSrcList.indexOf(item.src_sid) !== -1);
                tableRef.setCheckboxRow(filter, true);
            }
        },
        clearCheckbox() {
            const _this = this;
            let tableRef = _this[_this.tableOptions.ref];
            if (tableRef) {
                tableRef.clearCheckboxRow();
            }
        },
        handleSearchEvent() {
            this.doSearchValue = this.searchValue;
            this.$nextTick(() => this.initSelection());
        },
        handleTableEvent(event) {
            const _this = this;
            if (event.type === 'selectionChange') {
                let currDataSrcList = _this.showDataList.map(item => item.src_sid);
                let selectedDataList = _this.selectedList.filter(item => currDataSrcList.indexOf(item.src_sid) === -1);
                selectedDataList = selectedDataList.concat(event.value);
                _this.selectionList = selectedDataList;
            }
        },
    },
}
</script>

<style scoped lang="less">

</style>